<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="${basePath}">
    <link rel="stylesheet" href="static/plugins/layui/css/layui.css">
    <script src="static/plugins/jquery-3.1.0.js"></script>
    <script src="static/plugins/layui/layui.js"></script>
    <style>
        .required{
            color: red;
            margin: 0 5px;
        }
    </style>
</head>
<body style="padding: 15px">
<div class="layui-container">
    <form class="layui-form" id="dataForm" lay-filter="dataForm">
        <input type="hidden" name="id" id="id" value="${loginInfo.id}">
        <div class="layui-form-item">
            <label for="username" class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="username" id="username" value="${loginInfo.username}" readonly>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="pldPassword" class="layui-form-label"><span class="required">*</span>原密码</label>
            <div class="layui-input-block">
                <input type="password" class="layui-input" name="pldPassword" id="pldPassword" placeholder="请输入原密码" lay-verify="required|checkPwd" lay-reqtext="原密码不能为空">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="password" class="layui-form-label"><span class="required">*</span>新密码</label>
            <div class="layui-input-block">
                <input type="password" class="layui-input" name="password" id="password" placeholder="请输入新密码" lay-verify="required" lay-reqtext="新密码不能为空">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="confirmPassword" class="layui-form-label"><span class="required">*</span>确认密码</label>
            <div class="layui-input-block">
                <input type="password" class="layui-input" name="confirmPassword" id="confirmPassword" placeholder="请再次输入新密码" lay-verify="required|checkConfirm" lay-reqtext="确认密码不能为空">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="save">提交</button>
            </div>
        </div>
    </form>
</div>
</body>
<script>
    $(function () {
        layui.use(function () {
            const form = layui.form;
            form.verify({
                checkPwd(value){
                    let pass = false;
                    $.ajax({
                        url:"userinfo",
                        data:{
                            param:"checkPwd",
                            id:$("#id").val(),
                            password:value
                        },
                        method:"get",
                        dataType:"json",
                        async:false,
                        success(res){
                            pass = res.code !== 200;
                        }
                    })
                    if(pass){
                        return "原密码不正确！";
                    }
                },
                checkConfirm(value){
                    if(value !== $("#password").val()){
                        return "两次密码不一致！";
                    }
                }
            });
            form.on("submit(save)",function ({field}) {
                $.ajax({
                    url:"userinfo",
                    data:{
                        param:"update",
                        ...field
                    },
                    method:"post",
                    dataType:"json",
                    success(res) {
                        if(res.code === 200){
                            layer.alert("修改密码成功，请重新登录！",{icon:6},function () {
                                top.location.replace("userinfo?param=logout");
                            })
                        }else{
                            layer.alert(res.msg,{icon:5});
                        }
                    }
                });
                return false;
            });
        });
    })
</script>
</html>
